<template>
    <div class="container">
        <div class="content">
            <txv-video vid="j0866trwb6p" playerid="txv1" title="牙齿补牙动画" defn="高清" autoplay></txv-video>
            <!-- <video :src="vdSrc" /> -->
        </div>
        <div class="ct">
            <div>
                <!-- <p class="title">{{query.title}}</p>
                <p class="text">{{query.time}}</p> -->
                <p class="title">牙齿补牙动画</p>
                <p class="text">2019-04-30 12:00</p>
            </div>
            <div class="item">
                <img src="/static/img/comment.png" class="icon" @click="goComment"/>
                <img src="/static/img/mess.png" class="icon"/>
                <img src="/static/img/star.png" class="icon" @click="toStar" v-if="star"/>
                <img src="/static/img/star2.png" class="icon" @click="toStar" v-else/>
            </div>
        </div>
        <div class="intro">
            <div style="padding:10rpx 20rpx;font-size:32rpx">简介</div>
            <div class="something">
                这里是一些介绍
            </div>
            <div v-for="(item,index) in imgList" :key="index">
                <img :src="item.img" style="width:100%"/>
            </div>
        </div>
        <i-divider content="分隔线"></i-divider>
        <view class="caption-wrap">
            <div class="tt">评论区</div>
            <i-collapse name="-1">
                <i-collapse-item :title="i.tt" :name="index2" v-for="(i,index2) in content" :key="index2">
                    <view slot="content">
                        <div class="user">
                            <img :src="i.head" class="userImg"/>
                            <div class="userName">用户{{i.user}}</div>
                            <i-rate disabled class="rate"
                                :value="i.star">
                            </i-rate>
                        </div>
                        <div style="margin:0 40rpx">{{i.ct}}</div>
                        <div style="text-align:right;margin:20rpx 0;color:#cdcdcd">{{i.time}}</div>
                    </view>
                </i-collapse-item>
            </i-collapse>
            <textarea class="area-tt" placeholder="标题" v-model="comment.title"></textarea>
            <textarea class="area" placeholder="输入点什么" v-model="comment.content"></textarea>
            <i-rate @change="select" class="selectRate" :value="comment.star"></i-rate>
        <i-button type="success" class="bt" @click="addComment">评论</i-button>
        </view>
   </div>
</template>

<script>
export default {
    data() {
        return {
            query:{},
            star:false,
            imgList:[{
                img:'',
            }],
            content:[],
            comment:{
                title:'',
                content:'',
                star:3,
            },
            user:{},
            vdSrc:'',
        }
    },
    methods:{
        goComment() {
            wx.pageScrollTo({
                scrollTop:1000,
            })
        },
        toStar() {
            if(this.star) {
                wx.showToast({
                    title:'取消收藏'
                })
            }else{
                wx.showToast({
                    title:'收藏成功'
                })
            }
            this.star = !this.star
        },
        addComment() {
            if(this.comment.title == '' || this.comment.content == '' || this.comment.star == '') {
                wx.showToast({
                    icon:'none',
                    title:'请填写完整内容'
                })
                return
            }
            let data = {
                head:this.user.avatarUrl,
                user:this.user.nickName,
                tt:this.comment.title,
                ct:this.comment.content,
                star:this.comment.star,
                time:new Date().toLocaleString()
            }
            this.content.push(data)
            this.comment = {
                title:'',
                content:'',
                star:3,
            }
        },
        select(e) {
            this.comment.star = e.mp.detail.index
        },
    },
    onShow() {
        // this.query = this.$root.$mp.query
        // var vdAry = [
        //     '',
        //     '',
        // ]
        // // 设置视频地址
        // this.vdSrc = vdAry[this.query.index]
        wx.getUserInfo({
            success: (res) => {
                this.user = res.userInfo
            }
        })  
        // 使用mock
        var Mock = require('mockjs') 
        var imgList = Mock.mock({
            'imgList|1-2':[{
               'img|1': [
                    "/static/img/test1.jpg",
                    "/static/img/test2.jpg",
                    "/static/img/test3.jpg",
                    "/static/img/test4.jpg",
                    "/static/img/test5.jpg",
                    "/static/img/test6.jpg",
                    "/static/img/test7.jpg",
                ], 
            }]
        })   
        var content = Mock.mock({
            // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
            'content|1-5': [{
                // 头像
                // 属性 id 是一个自增数，起始值为 1，每次增 1
                'head|1': [
                    "/static/img/type1.png",
                    "/static/img/type2.png",
                    "/static/img/type3.png",
                    "/static/img/type4.png",
                    "/static/img/icon.png",
                ],
                // 用户名
                'user|1':function() {
                    return Mock.mock('@string("upper", 5)')
                },
                // 标题
                'tt|1':[
                    "有趣",
                    "我觉得一般",
                    "还凑合",
                    "秀的我头晕",
                    "蔡徐坤上身"
                ],
                // 详细内容
                'ct|1':[
                    "真的有趣不骗你们",
                    "心态崩了好无聊",
                    "看完牙齿瞬间变白",
                    "鸡你太美",
                    "我佛了太好看了吧"
                ],
                // 星星数
                'star|1-5':1,
                'time':function() {
                    return Mock.Random.datetime()
                }
            }]
        })
        // 输出结果
        this.content = content.content
        this.imgList = imgList.imgList
    }
} 
</script>
<style lang='stylus' scoped>
.content
    margin 20rpx
video
    display block
    width 100%
    height 350rpx
.title
    font-size 40rpx
    padding 20rpx
.text
    font-size 28rpx
    padding 20rpx
    color #aaaaaa
.ct
    display flex
.ct div
    width 100%
.item
    display flex
    align-items center
    justify-content space-around
.icon
    width 60rpx
    height 60rpx
.intro
    border-top 1px solid #cdcdcd
.something
    padding 20rpx
    font-size 28rpx
.tt
    font-size 30rpx
    margin 20rpx
.user 
    display flex
    align-items center
    margin 20rpx 0
    position relative
.userImg
    width 50rpx
    height 50rpx
    border-radius 50%
.userName
    margin-left 10rpx
    font-size 30rpx
.rate
    position absolute
    right 20rpx
.area-tt
    box-sizing border-box
    height 80rpx
    margin 20rpx
    padding 20rpx
    font-size 25rpx
    border-radius 10rpx
    border 1px solid #cdcdcd
    background #f8f8f8
.area
    box-sizing border-box
    height 300rpx
    margin 20rpx
    padding 20rpx
    font-size 25rpx
    border-radius 10rpx
    border 1px solid #cdcdcd
    background #f8f8f8
.selectRate
    margin 10rpx 20rpx
</style>
